@import "./common";

.wrap {
    main {
        .bgBox {
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;

            .imgBox {
                position: absolute;
                z-index: -1;
                padding-top: 100px;
                background: linear-gradient(180deg, rgba(51, 51, 51, .2), transparent);

                img {
                    width: 100%;
                }
            }

            .contBox {
                width: 1200px;
                margin-top: 145px;

                h2 {
                    color: rgba(51, 51, 51, 1);
                    font-size: 48px;
                    text-align: left;
                    font-weight: 700;
                    position: relative;
                    margin-bottom: 40px;

                    &::before {
                        content: "";
                        position: absolute;
                        width: 30px;
                        height: 3px;
                        background-color: #FF220B;
                        top: 100%;
                        left: 0;
                        margin-top: 10px;
                    }
                }

                p {
                    width: 516px;
                    color: rgba(51, 51, 51, 1);
                    text-align: left;
                    line-height: 24px;
                    margin-bottom: 10px;
                }
            }

            .developBox {
                width: 1200px;
                margin-top: 275px;
                position: relative;
                box-sizing: border-box;
                padding: 0px 24% 0px 31px;

                .develop_bg {
                    width: 107%;
                    height: 130%;
                    position: absolute;
                    left: 50%;
                    top: 50%;
                    transform: translate(-50%, -50%);
                    z-index: -1;

                    img {
                        width: 100%;
                        height: 100%;
                    }
                }

                .title {
                    h3 {
                        color: rgba(51, 51, 51, 1);
                        font-size: 40px;
                        text-align: left;
                        font-weight: 700;
                        margin: 40px 0 20px;
                    }
                }

                .cont {
                    display: flex;
                    padding-bottom: 80px;

                    .imgLeft {
                        img {
                            width: 56px;
                            height: 287px;
                        }
                    }

                    .textBox {
                        .item {
                            margin-bottom: 20px;

                            h4 {
                                font-size: 18px;
                                font-weight: 700;
                                color: rgba(51, 51, 51, 1);
                                margin-bottom: 6px;
                                line-height: 24px;
                            }

                            p {
                                line-height: 20px;
                            }
                        }
                    }
                }
            }
        }

        .container {
            width: 1200px;
            margin: 0 auto;
            margin-top: 80px;

            .visionBox {
                box-shadow: 0 3px 36px rgb(51 51 51 / 10%);
                display: flex;
                flex-wrap: wrap;

                .item {
                    width: 50%;
                    box-sizing: border-box;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;

                    img {
                        width: 100%;
                    }

                    h3 {
                        font-size: 40px;
                        font-weight: 700;
                    }

                    .line {
                        width: 30px;
                        height: 3px;
                        background-color: #FF220B;
                        margin: 20px 0 10px;
                    }

                    p {
                        font-size: 18px;
                        line-height: 40px;
                    }
                }

                .item_text {
                    padding-left: 125px;
                }
            }

            .interpretBox {
                width: 100%;
                height: 305px;
                box-shadow: 0 3px 36px rgb(51 51 51 / 10%);
                margin-top: 80px;
                display: flex;
                align-items: center;
                justify-content: center;

                .inter_left {
                    width: 33.33%;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;

                    .title {
                        color: rgba(51, 51, 51, 1);
                        font-size: 78px;
                        font-weight: 700;
                        -webkit-box-reflect: below -7px -webkit-gradient(linear, left top, left bottom, from(transparent), to(hsla(0, 0%, 100%, .07)));

                    }

                    .m_title {
                        color: rgba(51, 51, 51, 1);
                        font-size: 22px;
                        margin-top: 60px;
                    }
                }

                .inter_right {
                    width: 66.67%;
                    height: 100%;
                    display: flex;
                    align-items: center;
                    justify-content: space-around;
                    background: linear-gradient(270deg, rgba(255, 34, 11, 0) 0%, rgba(255, 34, 11, 0.06) 100%);

                    .item {
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        justify-content: center;

                        .item_cont {
                            color: rgba(102, 102, 102, 1);
                            margin: 18px 0;
                        }

                        .item_title {
                            color: rgba(51, 51, 51, 1);
                            font-size: 26px;
                            font-weight: 700;
                        }
                    }
                }
            }

            .teamBox {
                width: 100%;
                margin: 80px 0;

                .title {
                    @extend %title;
                    text-align: left;
                }

                .imgBox {
                    margin-top: 20px;

                    img {
                        width: 100%;
                    }
                }
            }
        }
    }
}